<template>
    <section class="RoleManager">
        <Table ref="Tabular" :search-options="searchOptions" :tableDatas="list" :loading="loading" :pages="pages"
            :total="total" :columns="columns" @search="handleSearch" @delete="handleDel" @editor="handleEditor">
            <template #searchOptLeft>
                <a-button v-permission="['createFlag']" @click="visible = true" type="primary"><i class="fa fa-plus" style="margin-right: 8px;" />{{
                    $t("New") }}</a-button>
            </template>
            <template #type="{ row, index }">
                {{
                    showType(row)
                }}
            </template>
            <template #status="{ row, index }">
                <a-switch v-model:checked="row.status" :checked-value="1" :unchecked-value="0"
                    @change="changeStatus(row)" />
            </template>
            <template #nameEn="{ row, index }">
                {{ showCurrentLang(row, isCn, isEn, isArabic) }}
            </template>
        </Table>
        <AddDialog v-if="visible" v-model:visible="visible" @ok="handleFlush" />
        <AddRolesDialog v-if="roleVisible" v-model:visible="roleVisible" :target="target" />
    </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Table from '@/components/Table/index.vue';
import { message } from 'ant-design-vue';
import { showCurrentLang, showCurrentLang2 } from '@/utils/common/common'
import { useI18n } from 'vue-i18n';
import { GetCodeDict } from '@/api/public'
import { queryRolesLists, DeleteRole, enabledRole, disabledRole } from '@/api/setting'
import { useLanguage } from "@/hooks/index"
import AddDialog from './add-rolename-dialog.vue'
import AddRolesDialog from './add-role-dialog.vue'
const { isEn, isCn, isArabic } = useLanguage()
const { t: $t } = useI18n();
const store = useStore();
let pages = ref<object>({ pageSize: 30, pageNo: 1 });
let total = ref(20)
let list = ref<object>([]);
let loading = ref<boolean>(false);
let visible = ref(false)
let target = ref({})
let Tabular = ref(null)
let roleVisible = ref(false)
let types = ref([])
const columns = ref<object>([
    {
        title: () => $t('角色名称'),
        dataIndex: 'nameEn',
        slot: 'nameEn',
        align: 'left'
    },
    {
        title: () => $t('角色标识'),
        dataIndex: 'roleKey',
        slot: 'roleKey',
        align: 'left'
    },
    {
        title: () => $t('类型'),
        dataIndex: 'type',
        slot: 'type',
        align: 'left'
    },
    {
        title: () => $t('角色状态'),
        dataIndex: 'status',
        slot: 'status',
        align: 'left'
    },
    {
        title: () => $t('描述'),
        dataIndex: 'remark',
        align: 'left'
    },
    {
        title: () => $t('操作'),
        dataIndex: 'opts',
        align: 'center',
        slot: 'opt',
        edit: true,
        delete: true,
        width: 100
    }
]);
let searchOptions = ref([
    {
        prop: 'keyword',
        label: '',
        type: 'inputSearch',
        default: '',
        attrs: {
            clearable: true,
        },
    },
]);
const isEnable = (value) => {
    if (value) return true
    return false
}

const handleSearch = async ({ searchForm, pager }: any) => {
    let requestData = {
        ...searchForm,
        ...pager
    }
    loading.value = true
    const { data, totalCount, pageSize, pageNo } = await queryRolesLists(requestData).finally(() => {
        loading.value = false
    })
    total.value = totalCount
    list.value = data
    pages.pageSize = pageSize
    pages.pageNo = pageNo
}
const handleFlush = () => {
    Tabular.value.flush()
}
const handleAdd = () => {
    target.value = {}
    visible.value = true
}
const showType = (row) => {
    var item = types.value.find(v => { if (v.dictData == row.type) return v })
    return showCurrentLang2(item, isCn.value, isEn.value, isArabic.value)
}
const handleEditor = (record) => {
    target.value = cloneDeep(record)
    roleVisible.value = true
}
const changeStatus = async (row) => {
    // 这时status已经改变为最新的值了，所以这里逻辑没问题
    if (row.status) await enabledRole(row.uuid)
    if (!row.status) await disabledRole(row.uuid)
    message.success($t("操作成功"))
    handleFlush()
}
const handleDel = async (record) => {
    const id = record.id
    if (!id) return
    await DeleteRole(id)
    message.success($t("操作成功"))
    handleFlush()
}
const getRoleType = async () => {
    const { data } = await GetCodeDict({ dictKey: 'systemRoleType' })
    types.value = data
}
onMounted(() => {
    handleSearch({ searchForm: { keyword: "" }, pager: { pageSize: 30, pageNo: 1 } });
    getRoleType()
})
</script>

<style lang="scss" scoped>
.RoleManager {
    padding: 24px 24px 0 16px;
}
.ant-switch-checked {
    background-color: #6fc9c2;
    &:hover {
        background-color: #6fc9c2 !important;
    }
}
// .ant-switch-handle:hover {
//     background-color: transparent !important;
// }
.ant-switch-inner-unchecked:hover {
    background-color: transparent !important;
}
</style>